<template>
  <div class="tip">
    <!--科室-->
    <div class="department">
      <div class="department_header">
        <div class="left">
          <span>常见科室</span>
        </div>
        <div class="right">
          <span>全部</span>
          <svg
              t="1685153789391"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4663"
              width="16"
              height="16"
          >
            <path
                d="M709.845333 250.346667a22.4 22.4 0 0 1 0.533334-30.848 20.48 20.48 0 0 1 29.717333 0.64l272.426667 292.693333-272.426667 292.650667a20.458667 20.458667 0 0 1-29.717333 0.64c-8.32-8.32-8.746667-21.973333-0.533334-30.848l242.346667-262.464-242.346667-262.464z"
                fill="#3D3D3D"
                p-id="4664"
            ></path>
          </svg>
        </div>

      </div>
      <div class="department_body">
        <ul>
          <li>神经内科</li>
          <li>消化内科</li>
          <li>呼吸内科</li>
          <li>内科</li>
          <li>妇科</li>
          <li>神经外科</li>
          <li>产科</li>
          <li>儿科</li>
        </ul>
      </div>
    </div>
    <!--平台公告-->
    <div class="notice">
      <div class="notice_header">
        <div class="left">
          <svg t="1709530459924" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="8372" width="32" height="32">
            <path
                d="M510.695 64.054C263.556 64.054 63.21 264.4 63.21 511.539s200.345 447.485 447.485 447.485S958.18 758.678 958.18 511.539 757.835 64.054 510.695 64.054zM319.302 545.861h-60.398V409.277h60.398v136.584z m213.189 204.768c-8.525 23.362-65.031 20.835-65.031 20.835-65.027-83.97-73.868-164.15-73.868-164.15l61.557-0.001c8.373 55.558 59.587 98.819 65.346 107.961 17.992 19.886 11.996 35.355 11.996 35.355z m143.367-79.499s-72.287-93.752-321.343-105.12l-0.064-174.938s210.241-7.682 320.521-139.002v-0.001s94.325-22.553 87.127 224.764c-0.004 0.001 10.036 170.306-86.239 194.297h-0.002z"
                p-id="8373" fill="#7cb8d7"></path>
          </svg>
          <span>平台公告</span>
        </div>
        <div class="right">
          <span>全部</span>
          <svg
              t="1685153789391"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4663"
              width="16"
              height="16"
          >
            <path
                d="M709.845333 250.346667a22.4 22.4 0 0 1 0.533334-30.848 20.48 20.48 0 0 1 29.717333 0.64l272.426667 292.693333-272.426667 292.650667a20.458667 20.458667 0 0 1-29.717333 0.64c-8.32-8.32-8.746667-21.973333-0.533334-30.848l242.346667-262.464-242.346667-262.464z"
                fill="#3D3D3D"
                p-id="4664"
            ></path>
          </svg>
        </div>
      </div>
      <div class="notice_body">
        <ul>
          <li>关于延长北京大学国际医院放假的通知</li>
          <li>北京中医药大学东方医院部分科室医生门诊医</li>
          <li> 武警总医院号源暂停更新通知</li>
        </ul>
      </div>
    </div>
    <!--停诊公告-->
    <div class="notice">
      <div class="notice_header">
        <div class="left">
          <svg t="1709531177178" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="9909" width="28" height="28"><path
              d="M736 768h-448a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64z m-44.8-415.552l-147.669333-147.669333a61.994667 61.994667 0 0 1-62.848 0l-147.669334 147.669333a32.554667 32.554667 0 0 1-46.037333-46.037333l161.578667-161.578667a63.68 63.68 0 0 1 127.104 0l161.578666 161.578667a32.554667 32.554667 0 0 1-46.037333 46.037333zM565.333333 512a32 32 0 0 1 0 64h-277.333333a32 32 0 0 1 0-64h277.333333z" fill="#ED885A" p-id="9910"></path><path d="M853.333333 981.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V384a85.333333 85.333333 0 0 1 85.333334-85.333333h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v512a85.333333 85.333333 0 0 1-85.333334 85.333333z m21.333334-576a42.666667 42.666667 0 0 0-42.666667-42.666666H192a42.666667 42.666667 0 0 0-42.666667 42.666666v469.333334a42.666667 42.666667 0 0 0 42.666667 42.666666h640a42.666667 42.666667 0 0 0 42.666667-42.666666V405.333333z" fill="#ED885A" p-id="9911"></path></svg>
          <span>停诊公告</span>
        </div>
        <div class="right">
          <span>全部</span>
          <svg
              t="1685153789391"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4663"
              width="16"
              height="16"
          >
            <path
                d="M709.845333 250.346667a22.4 22.4 0 0 1 0.533334-30.848 20.48 20.48 0 0 1 29.717333 0.64l272.426667 292.693333-272.426667 292.650667a20.458667 20.458667 0 0 1-29.717333 0.64c-8.32-8.32-8.746667-21.973333-0.533334-30.848l242.346667-262.464-242.346667-262.464z"
                fill="#3D3D3D"
                p-id="4664"
            ></path>
          </svg>
        </div>
      </div>
      <div class="notice_body">
        <ul>
          <li> 中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告 </li>
          <li> 首都医科大学附属北京潞河医院老年医学科门诊停诊公告 </li>
          <li> 中日友好医院中西医结合心内科门诊停诊公告 </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.tip {
  margin-left: 40px;

  .department {
    .department_header {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;

        span {
          margin-left: 5px;
          letter-spacing: 1px;
          font-weight: 700;
          color: #333;
          font-size: 16px;
        }
      }

      .right {
        display: flex;

        span {
          color: #999;
          display: flex;
          font-size: 14px;
          align-items: center;
          cursor: pointer;
        }
      }
    }

    .department_body {

      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          margin-left: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 40%;
          margin-top: 20px;
          color: gray;
          font-size: 15px;
          cursor: pointer;
        }
      }

    }
  }

  .notice {
    margin-top: 50px;

    .notice_header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          letter-spacing: 1px;
          font-weight: 700;
          color: #333;
          font-size: 16px;
        }
      }

      .right {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          color: #999;
          display: flex;
          font-size: 14px;
          align-items: center;
          cursor: pointer;
        }
      }
    }

    .notice_body {
      ul {

        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 20px;
          color: grey;
          font-size: 15px;
          cursor: pointer;
        }
      }

    }
  }
}
</style>